<!--
 * @Author: lp 654528967@qq.com
 * @Date: 2022-06-15 14:05:49
 * @LastEditors: lp 654528967@qq.com
 * @LastEditTime: 2022-06-21 10:47:51
 * @FilePath: \nien-vue3-admin\src\views\myMission\businessHandling\processApplication\components\demand.vue
 * @Description: 需求业务表单数据
-->
<template>
  <el-form
    ref="businessForm"
    :model="form"
    label-width="120px"
    :rules="rules"
    :disabled="disabled"
  >
    <el-form-item label="需求标题" prop="tag">
      <el-input v-model="form.tag" size="small"></el-input>
    </el-form-item>
    <el-form-item label="需求描述" prop="describes">
      <el-input
        v-model="form.describes"
        type="textarea"
        :rows="6"
        :control="false"
      ></el-input>
    </el-form-item>
    <el-form-item label="需求类型" prop="demandType">
      <el-select
        v-model="form.demandType"
        clearable
        placeholder="请选择需求类型"
        size="small"
      >
        <el-option label="新增" :value="0"></el-option> 
        <el-option label="修改" :value="1"></el-option>
        <el-option label="Bug修复" :value="2"></el-option>
        <el-option label="导出" :value="3"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="功能修改位置" prop="position">
      <el-input v-model="form.position" size="small"></el-input>
    </el-form-item>
    <el-form-item label="期望完成时间" prop="submissionTime">
      <el-date-picker
        v-model="form.submissionTime"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd"
        size="small"
        type="date"
        placeholder="请选择日期"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="紧急程度" prop="businessType">
      <el-radio-group v-model="form.businessType">
        <el-radio v-for="item in businessTypeList" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="测试人员" prop="tester">
      <el-select
        v-model="form.tester"
        filterable
        placeholder="请选择测试人员"
        size="small"
      >
        <el-option
          v-for="item in userListOptions"
          :key="item.userName"
          :label="item.nickName"
          :value="item.userName"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="验收人" prop="acceptancePerson">
      <el-select
        v-model="form.acceptancePerson"
        filterable
        placeholder="请选择验收人"
        size="small"
      >
        <el-option
          v-for="item in userListOptions"
          :key="item.userName"
          :label="item.nickName"
          :value="item.userName"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="操作人" prop="demanders">
      <el-input v-model="form.demanders" size="small" disabled></el-input>
    </el-form-item>
    <el-form-item label="备注" prop="remarks">
      <el-input v-model="form.remarks" type="textarea" :control="false"></el-input>
    </el-form-item>
  </el-form>
</template>
<script lang='ts' setup>
import { ref, watchEffect } from 'vue'
import { DictDirection } from '@/store/modules/dicts'
import { useDicts } from '@/utils'

interface Form {
  tag: string,
    describes: string,
    demanders: string,
    submissionTime: string,
    businessType: string,
    remarks: string,
    position: string,
    demandType: string,
    acceptancePerson: string,
    tester: string,
}
const form = ref<Form>({
  tag: '',
  describes: '',
  demanders: '',
  submissionTime: '',
  businessType: '',
  remarks: '',
  position: '',
  demandType: '',
  acceptancePerson: '',
  tester: '',
}), rules = ref({
    tag: [{ required: true, message: '请输入标题', trigger: ['blur'] }],
    describes: [{ required: true, message: '请输入需求描述', trigger: ['blur'] }],
    businessType: [{ required: true, message: '请选择需求紧急程度', trigger: ['change'] }],
    submissionTime: [{ required: true, message: '请选择期望完成时间', trigger: ['change'] }],
    tester: [{ required: true, message: '请选择测试人员', trigger: ['change'] }],
    acceptancePerson: [{ required: true, message: '请选择验收人', trigger: ['change'] }],
  }), pickerOptions = {
    disabledDate(time) {
      return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
    },
  }, businessTypeList = [
    {
      value: 0,
      label: '低',
    },
    {
      value: 1,
      label: '中',
    },
    {
      value: 2,
      label: '高',
    },
  ], businessForm = ref(null),
  prop = withDefaults(defineProps<{data?:Form, disabled?:boolean}>(), {
    data: () => ({
      tag: '',
      describes: '',
      demanders: '',
      submissionTime: '',
      businessType: '',
      remarks: '',
      position: '',
      demandType: '',
      acceptancePerson: '',
      tester: '',
    }),
    disabled: false,
  })
const { 
  [DictDirection.员工信息]: userListOptions, 
} = useDicts([DictDirection.员工信息])
defineExpose({
  formComponent: businessForm,
  form,
})
watchEffect(() => {
  if (prop.data) form.value = prop.data
})
</script>
